import {createApp} from "vue";
import {designPage} from 'plain-ui-composition';
import {createBranchNode, createEndNode, createFlowEdge, createFlowNode, createRenderNode, createStartNode, ReactX6Editor, useFlowEditor} from "../src";
import './main.scss';

const App = designPage(() => {

  const editor = useFlowEditor({
    onlyOneStartNode: true,
    operators: [
      {
        label: '选项一',
        icon: () => (<i class="iconfont icon-pay_wechat" style={{ height: '27px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}/>),
        handler: () => console.log('option 1...')
      }
    ]
  });
  editor.components.registry(createStartNode());
  editor.components.registry(createFlowNode());
  editor.components.registry(createBranchNode());
  editor.components.registry(createEndNode());
  editor.components.registry(createFlowEdge());
  editor.components.registry(createRenderNode());

  import('./flow.data.json').then(data => {editor.methods.update(data.default);});

  editor.hooks.onCreateContextmenu.use(({ options, edge, node, type }) => {
    switch (type) {
      case 'node':
        options.push({
          label: '自定义node选项2',
          icon: () => <i class="iconfont icon-pay_zhifubao" style={{ padding: '0 4px' }}/>,
          handler: () => alert('自定义node选项2')
        });
        return;
      case 'edge':
        options.push({
          label: '自定义edge选项',
          icon: 'data',
          handler: () => alert('自定义edge选项')
        });
        return;
      case 'vertex':
        options.push({
          label: '自定义拐点选项',
          icon: 'data',
          handler: () => alert('自定义拐点选项')
        });
        return;
      case 'blank':
        options.push({
          label: '自定义白板选项',
          icon: 'data',
          handler: () => alert('自定义白板选项')
        });
        return;
    }
  });

  return () => (
    <div style={{ height: '100%', width: '100%' }}>
      <ReactX6Editor editor={editor}/>
      {/*<div style={{ position: 'absolute', bottom: 0, right: 0 }}>
        {JSON.stringify(editor.state.data)}
      </div>*/}
    </div>
  );
});

const Page = designPage(() => () => (
  <>
    <App/>
  </>
));

createApp(<Page/>).mount('#app');
